<template>
  <div class="pos">
    <el-row class='pos-bg'>
      <el-col :span='7' class='pos-order' id='posOrder'>
        <div class="tab-box">
          <el-tabs class="tab-class" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="订单" name="first">
              <el-table :data="tableData" show-header border width="100%" stripe size="mini">
                <el-table-column prop="goodsName" label="商品名称"  highlight-current-row></el-table-column>
                <el-table-column prop="count" label="数量" width="50"></el-table-column>
                <el-table-column prop="price" label="单价"  width="50"></el-table-column>
                <el-table-column label="操作" fixed="right"  width="90">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="remove(scope.row)">删除</el-button>
                    <el-button type="text" size="small" @click="add(scope.row)">添加</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="total">
                <small>数量：</small>{{ totalCount }}， <small>金额：</small>{{ totalMoney }}元
              </div>
              <el-row class="btn-box">
                <el-button type="danger" @click="removeALl">删除</el-button>
                <el-button type="warning">挂单</el-button>
                <el-button type="success" @click="pay">结账</el-button>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="外卖" name="second">外卖外卖外卖外卖外卖</el-tab-pane>
            <el-tab-pane label="挂单" name="third">挂单</el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :span='17' class="goods-box">
        <div class="often-goods">
          <p class="often-title">热门商品</p>
          <ul>
            <li v-for='goods in oftenGoods' @click="addOrder(goods)">
              <span>{{ goods.goodsName }}</span>
              <span class="o-price">￥{{ goods.price }}元</span>
            </li>
          </ul>
        </div>
        <div class="goods-type">
          <el-tabs border v-model="goodsType">
            <el-tab-pane label="汉堡" name="first">
              <ul class='cookList'>
                  <li v-for="goods in type0Goods" @click="addOrder(goods)">
                      <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                      <span class="foodName">{{goods.goodsName}}</span>
                      <span class="foodPrice">￥{{goods.price}}元</span>
                  </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="小食" name="second">
              <ul class='cookList'>
                  <li v-for="goods in type1Goods" @click="addOrder(goods)">
                      <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                      <span class="foodName">{{goods.goodsName}}</span>
                      <span class="foodPrice">￥{{goods.price}}元</span>
                  </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="饮料" name="third">
              <ul class='cookList'>
                  <li v-for="goods in type2Goods" @click="addOrder(goods)">
                      <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                      <span class="foodName">{{goods.goodsName}}</span>
                      <span class="foodPrice">￥{{goods.price}}元</span>
                  </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="套餐" name="fourth">
              <ul class='cookList'>
                  <li v-for="goods in type3Goods" @click="addOrder(goods)">
                      <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                      <span class="foodName">{{goods.goodsName}}</span>
                      <span class="foodPrice">￥{{goods.price}}元</span>
                  </li>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
import { tableData,oftenGoods,type0Goods } from '@/assets/js/goodsList'

export default {
  name: 'pos',
  data(){
    return {
      activeName:"first",
      goodsType:"first",
      tableData:[],
      oftenGoods:[],
      type0Goods:[],
      type1Goods:[],
      type2Goods:[],
      type3Goods:[]
    }
  },
  created(){
    axios.get("http://jspang.com/DemoApi/oftenGoods.php").then((result)=>{
      // console.log(result);
      this.oftenGoods = result.data;
    }).catch(()=>{
      alert("网络不通，不能访问！")
    });
    axios.get("http://jspang.com/DemoApi/typeGoods.php").then((result)=>{
      // console.log(result);
      this.type0Goods = result.data[0];
      this.type1Goods = result.data[1];
      this.type2Goods = result.data[2];
      this.type3Goods = result.data[3];
    }).catch(()=>{
      alert("网络不通，不能访问！")
    });
    
  },
  mounted(){
    var clientHeight = document.body.clientHeight;
    document.getElementById("posOrder").style.height = clientHeight + 'px';
  },
  methods:{
    handleClick(tab,event){
      // console.log(tab);
      // console.log(event);
    },
    addOrder(goods){
      //判断订单里是否已存在
      var isExistFlag = false;
      for(let i=0;i<this.tableData.length;i++){
        if(goods.goodsId == this.tableData[i].goodsId){
          isExistFlag = true;
        }
      }
      //业务逻辑
      if(isExistFlag){
        let newGoodsObj = this.tableData.filter(obj=>obj.goodsId==goods.goodsId);
        // console.log(newGoodsObj);
        newGoodsObj[0].count++;
      }else{
        let newGoodsObj = {goodsName:goods.goodsName,goodsId:goods.goodsId,price: goods.price,count:1};
        this.tableData.push(newGoodsObj);
      }
    },
    remove(goods){
      let newGoodsObj = this.tableData.filter(obj=>obj.goodsId==goods.goodsId);
      newGoodsObj[0].count--;
      if(newGoodsObj[0].count<=0){
        this.tableData = this.tableData.filter(obj=>obj.goodsId != goods.goodsId);
      }
    },
    add(goods){
      let newGoodsObj = this.tableData.filter(obj=>obj.goodsId==goods.goodsId);
      newGoodsObj[0].count++;
    },
    pay(){
      if(this.tableData.length>0){
        this.tableData = [];
        this.$message({
          message:"结账完成，祝您用餐愉快！",
          type:"success",
          showClose:false
        })
      }else{
        this.$message.error("请先选择商品!");
      }
    },
    removeALl(){
      this.tableData = [];
    }
  },
  computed:{
    totalMoney(){
      let money = 0;
      this.tableData.forEach((element)=>{
        money += element.count * element.price;
      });
      return money;
    },
    totalCount(){
      let count = 0;
      this.tableData.forEach((element)=>{
        count += element.count;
      });
      return count;
    }
  }
}
</script>

<style scoped>
.pos-bg{
  background-color:#f9fafc;
}
.pos-order{
  box-sizing: border-box;
  border-right:1px solid #c0ccda;
}
.border{
  border:1px solid red;
}
.tab-class{
  width:100%;
}
.btn-box{
  padding-top:15px;
}
.often-goods{
  /* height:250px;
  overflow-y: scroll; */
}
.often-title{
  width:100%;
  text-align:left;
  padding:10px;
  margin:0;
  border-bottom:1px solid #E4E7ED;
}
.often-goods li{
  list-style:none;
  float:left;
  padding:10px;
  margin:10px;
  border-radius:8px;
  background-color:white;
  border:1px soid #FAFAFA;
}
.often-goods li:hover{
  background-color:#E6A23C;
}
.goods-type{
  clear:both;
}
.cookList{
  height:320px;
  overflow-y: scroll;
}
.cookList li{
    list-style: none;
    width:180px;
    border:1px solid #E5E9F2;
    height: auot;
    overflow: hidden;
    background-color:#fff;
    padding: 2px;
    float:left;
    margin: 2px;

}
.cookList li span{
      display: block;
      float:left;
}
.foodImg{
    width: 40%;
}
.foodName{
    font-size: 18px;
    padding-left: 10px;
    color:brown;

}
.foodPrice{
    font-size: 16px;
    padding-left: 10px;
    padding-top:10px;
}
.goods-box li{
  cursor:pointer;
}
</style>
